<template>
    <div class="article-detail"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    customClass="loading"
    >
        <div class="header">
            <h2>{{article.title}}</h2>
            <span>
                <el-tag size="small" class="category-tag" title="分类">{{ article.categoryName }}</el-tag>
            </span>
            <div class="tags">
                <el-tag 
                    v-for="(tag, idx) in tags" 
                    :key="idx"
                    size="small"
                    title="标签"
                    :hit = "false"
                    :color="colors[idx % colors.length]"
                    >
                    {{tag}}
                </el-tag>
            </div>
            
        </div>
        <el-divider></el-divider>
        <div class="content" v-html="article.content" v-high>

        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        this.loadArticle();
    },
    data() {
        return {
            loading: true,
            article: '',
            tags: [],
            colors: [
                '#eccc68',
                '#ff7f50',
                '#ff6b81',
                '#70a1ff',
                '#ff4757',
                '#1e90ff',
                '#3742fa',
            ]
        }
    },
    methods: {
        loadArticle() {
            this.loading = true
            this.$http.get(`/front/article/${this.id}`).then(res => {
                const data = res.data
                if (!data.status) {
                    return this.$message.error(res.message);
                }
                this.article = data.data
                this.loading = false
                document.title = this.article.title + '个人博客'
            })
            this.$http.get(`/front/tag/getByArtucleId/${this.id}`).then(res => {
                const data = res.data
                if (!data.status) {
                    return this.$message.error(res.message);
                }
                console.log(data);
                this.tags = data.data
            })
        }
    },
    computed: {
        id() {
            return this.$route.params.id
        }
    },
    watch: {
        $route() {
            this.loadArticle()
        }
    }
}
</script>

<style lang="less" scoped>
.article-detail {
    background: #fff;
    min-height: calc(100vh - 120px);
    border-radius: 5px;
    padding: 10px 15px;
    margin: 10px 5px 0 0;
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    h2 {
        padding: 0 0 10px 0;
    }
    .tags > span {
        margin: 5px 5px 0 0 ;
        color: #fff;
    }
    
}




.loading {
    color: #fff;
    background: #000;
}
</style>